<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 注册</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="auth-container fade-in">
            <div class="auth-header">
                <img src="logo.svg" alt="五子棋Logo" class="auth-logo">
                <h1>五子棋在线对战</h1>
            </div>
            
            <form id="registerForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="username" placeholder="设置账号（字母和数字组合）" required>
                    <div class="error-message" id="username-error"></div>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="设置密码（至少8位，包含字母和数字）" required>
                    <div class="error-message" id="password-error"></div>
                    <div class="password-strength" id="password-strength"></div>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-control" id="confirm-password" placeholder="再次输入密码" required>
                    <div class="error-message" id="confirm-password-error"></div>
                </div>
                
                <button type="submit" class="btn btn-success" style="width: 100%;">创建账号</button>
                
                <div class="auth-footer">
                    <p>已有账号？ <a href="login.html" class="auth-link">返回登录</a></p>
                </div>
            </form>
            
            <div class="auth-footer">
                <p>&copy; 2025 五子棋在线对战平台</p>
            </div>
        </div>
    </div>

    <script>
        // 密码强度检测
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strengthElement = document.getElementById('password-strength');
            
            if (password.length === 0) {
                strengthElement.textContent = '';
                return;
            }
            
            // 简单的密码强度检测
            let strength = '弱';
            let color = '#E74C3C';
            
            if (password.length >= 8) {
                if (/[A-Z]/.test(password) && /[a-z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) {
                    strength = '强';
                    color = '#2ECC71';
                } else if (/[A-Za-z]/.test(password) && /[0-9]/.test(password)) {
                    strength = '中';
                    color = '#F39C12';
                }
            }
            
            strengthElement.textContent = `密码强度: ${strength}`;
            strengthElement.style.color = color;
        });
        
        // 表单提交验证
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            
            // 验证
            let isValid = true;
            
            // 验证用户名
            if (!username) {
                document.getElementById('username-error').textContent = '请输入账号';
                isValid = false;
            } else if (!/^[A-Za-z0-9]+$/.test(username)) {
                document.getElementById('username-error').textContent = '账号只能包含字母和数字';
                isValid = false;
            } else {
                document.getElementById('username-error').textContent = '';
                // 这里应该有检查用户名是否已存在的API调用
            }
            
            // 验证密码
            if (!password) {
                document.getElementById('password-error').textContent = '请输入密码';
                isValid = false;
            } else if (password.length < 8) {
                document.getElementById('password-error').textContent = '密码长度至少为8位';
                isValid = false;
            } else if (!/[A-Za-z]/.test(password) || !/[0-9]/.test(password)) {
                document.getElementById('password-error').textContent = '密码必须包含字母和数字';
                isValid = false;
            } else {
                document.getElementById('password-error').textContent = '';
            }
            
            // 验证确认密码
            if (password !== confirmPassword) {
                document.getElementById('confirm-password-error').textContent = '两次输入的密码不一致';
                isValid = false;
            } else {
                document.getElementById('confirm-password-error').textContent = '';
            }
            
            // 如果验证通过，模拟注册成功并跳转
            if (isValid) {
                // 这里应该是实际的注册API调用
                // 模拟注册成功
                setTimeout(function() {
                    alert('注册成功！请登录您的账号。');
                    window.location.href = 'login.html';
                }, 1000);
            }
        });
    </script>
</body>
</html>
